<template>
    <!-- 设置了元素的样式，使其宽度为视口宽度的100%（100vw），高度为视口高度的100%（100vh），即让该元素占满整个浏览器窗口的宽高 -->
  <a-layout style="width: 100vw;height: 100vh;">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo" :class="{'collapsed': collapsed}">
        <DropboxOutlined v-if="collapsed"/>
        <span v-else>Tingting工作台</span>
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
       <!--  <a-menu-item key="1">
          <user-outlined />
          <span>nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <video-camera-outlined />
          <span>nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <upload-outlined />
          <span>nav 3</span>
        </a-menu-item> -->
        <!-- :icon="item.icon" 属性：这个属性会导致无限递归调用 -->
        <a-menu-item v-for="item in userMenus" :key="item.key" >
          <component :is="item.icon" />
          <span @click="$router.push(item.path)">{{ item.title }}</span>
        </a-menu-item> 
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '6px', padding: '6px', background: '#fff', minHeight: '280px' }"
      >
        <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
//导入图标
import {
  DropboxOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
const $router = useRouter();

const selectedKeys = ref<string[]>(['1']);
const collapsed = ref<boolean>(false);

let userMenus = [
  {
    title: '用户管理',
    key: 'user',
    icon: UserOutlined,
    path:"/userManager"
  },
  {
    title: '商品管理',
    key: 'product',
    icon: VideoCameraOutlined,
    path:"/productManager"
  },
  {
    title: '文件管理',
    key: 'file',
    icon: UploadOutlined,
    path:"/fileManager"
  }
]

// 动态添加路由
/* for (let i = 0; i < userMenus.length; i++) {
  let item = userMenus[i];
  let route = {
    path: item.path,
    component: () => import("../views/" + item.title + ".vue"),
  };
  $router.addRoute(route);
} */
</script>
<style scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  &:hover {
    color: #1890ff;
  }
}

.logo {
  height: 32px;
  /* background: rgba(255, 255, 255, 0.3); */
  margin: 16px;
  text-align: center;
  line-height: 32px;
  color: white;
  font-size: 18px;
  font-weight: 400;
  /* 添加以下样式解决文字溢出问题 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease;
  min-width: 0;
}
/* 为展开状态添加特定样式 */
.logo:not(.collapsed) {
  padding: 0 8px;
}

</style>
